<template>
	<view class="buy-content">
		<view class="goods">
			<image :src="terminal.imgUrl" class="cu-avatar xl " style="width: 180rpx; " mode="widthFix"></image>
			<view class="info">
				<view class="title">{{terminal.terminalName}}</view>
				<view class="info-item">{{$t('shop.validityPeriod')}}：{{terminal.leaseDay}}{{$t('shop.day')}}</view>
				<view class="info-item">{{$t('shop.buy.unitPrice')}}：{{terminal.leasePrice}}{{terminal.coinFlag =='1'?' LMP':'$'}}</view>
			</view>
		</view>
		<view class="op-card">
			<view class="price">
				<view class="label">{{$t('shop.buy.totalPrice')}}</view>
				<view class="right now">{{terminal.leasePrice}}{{terminal.coinFlag =='1'?' LMP':'$'}}</view>
			</view>
			<view class="contract">
				<view class="link-text" @click="contractShow = true">
					【{{$t('shop.buy.purchaseContract')}}】
				</view>
			</view>
			<u-button class="btn-sub" :loading="loading" :disabled="loading" shape="circle" @click="submit">
				{{$t('common.submit')}}</u-button>
		</view>

		<u-popup :show="contractShow" mode="center" @close="contracClose" customStyle="border-radius: 10px;
					width: 85%;
					max-height: 550px;
					max-width: 350px;">
			<view class="rule">
				<view class="title">{{$t('shop.buy.protocolSpecification')}}</view>
				<view class="content">{{$t('shop.buy.tips')}}</view>
			</view>
			<view class="close-sign" @click="contracClose">
				<image style="width: 30px; height: 30px; border-radius: 0px; overflow: visible;"
					src="">
				</image>
			</view>
		</u-popup>

	</view>
</template>

<script>
	import {
		detail,
		buyApi
	} from "@/api/terminal/terminal_info.js"
	export default {
		data() {
			return {
				contractShow: false,
				terminal: {},
				loading: false
			};
		},
		onLoad: function(option) {

			detail(option.terminalId).then(rsp => {
				if (rsp.code == 200 && rsp.data) {
					this.terminal = rsp.data;
				}
			})
		},
		methods: {
			contracClose() {
				this.contractShow = false;
			},
			groupChange() {
				if (this.radioValue == '1') {
					this.radioValue = '1';
				} else {
					this.radioValue = '2';
				}
			},
			submit() {
				this.loading = true;
				buyApi(this.terminal.terminalId).then(rsp => {
					this.loading = false;
					if (rsp && rsp.code == 200) {
						uni.showToast({
							title: this.$t('shop.buy.success'),
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/home/terminal'
							});
						}, 1000);
					} else {
						uni.showToast({
							title: rsp.msg,
							icon: 'fail'
						})
					}
				}).catch(() => {
					this.loading = false;
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background-color: $uni-color-bg;

	}

	.buy-content {
		box-sizing: border-box;
		padding: 10px 12px;

		.goods {
			background: $uni-color-box;
			box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			padding: 12px;
			display: flex;
			align-items: center;

			.info {
				height: 80px;
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
				margin-left: 12px;

				.title {
					font-size: 13px;
					color: $uni-color-primary;
					font-weight: 500;
				}

				.info-item {
					font-size: 12px;
					color: $uni-color-subfont;
				}
			}
		}

		.op-card {
			background-color: $uni-color-box;
			color: white;
			box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, .12);
			border-radius: 10px;
			padding: 10px 12px;
			margin-top: 10px;

			.price {
				display: flex;
				justify-content: space-between;
				margin-top: 10px;
				padding-bottom: 4px;
				border-bottom: 0.5px solid #e6e6e6;

				.label {
					font-size: 13px;
					color: white;
					font-weight: 500;
				}

				.right {
					color: $uni-color-primary;
					font-size: 16px;
					margin-left: 12px;
				}
			}

			.contract {
				display: flex;
				align-items: center;
				margin-top: 16px;

				.link-text {
					color: white;
					font-size: 14px;
					text-decoration: underline;
					cursor: pointer;
					margin-left: 12px;
				}
			}
		}

		.btn-sub {
			margin-top: 16px;
			color: $uni-color-box;
			background-color: $uni-color-primary;
			border-color: $uni-color-primary;
		}

		.rule {
			background-color: #fff;
			border-radius: 10px;
			overflow: hidden;

			.title {
				height: 45px;
				background-color: $uni-color-primary;
				color: $uni-color-box;
				font-size: 16px;
				font-weight: 500;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.content {

				padding: 12px 16px;
				font-size: 13px;
				color: #333;
			}
		}

		.close-sign {
			position: absolute;
			bottom: -50px;
			left: 50%;
			-webkit-transform: translateX(-50%);
			transform: translateX(-50%);
			overflow: visible;
			background-color: transparent;
			width: 30px;
			height: 30px;
		}


	}
</style>